// 列表页面
import React from 'react';
import {
    UserOutlined,
    FieldNumberOutlined,
    BookOutlined
} from '@ant-design/icons';
import { Pagination } from 'antd';

import { Input } from 'antd';
import ListItem from './listItem';
import axios from 'axios';


const { Search } = Input;
const onSearch = (value) => {
    console.log(value)
};

let information = [
    { id: 1, title: '啊这', name: 'cx' },
    { id: 14, title: '啊这', name: 'cx' },
    { id: 1425, title: '啊这', name: 'cx' }
];

export default class List extends React.Component {
    //设置4个值，记录是哪个分类的更多按钮点进来的，根据值来渲染不同分类的返回值
    state = {
        first: 0,
        second: 0,
        third: 0,
        fourth: 0,
        data: information,
        pageSize: 15,
        total: 500
    }

    componentDidMount() {
        let query_params = new URLSearchParams(this.props.location.search);
        let first = query_params.get("first");
        let second = query_params.get("second");
        let third = query_params.get("third");
        let fourth = query_params.get("fourth");
        this.setState({
            first: first,
            second: second,
            third: third,
            fourth: fourth
        })
        //根据4个值来向后端请求数据，若都为0则为搜索框点进来的渲染所有类的数据
        if (this.state.first) {
            axios.get('/categories', {

            }).then((res) => {
                console.log(res.data)
            })
        } else if (this.state.second) {

        } else if (this.state.third) {

        } else if (this.state.fourth) {

        } else {

        }
    }

    back = () => {
        this.props.history.push('/')
    }

    first = () => {
        console.log(this.state)
    }

    render() {
        return (
            <div className='list'>
                <Header back={this.back}/>
                <Info/>
                <div className='content-info'>
                    <ListItem className='blog-content'
                        information={information} />
                </div>
                <Footer first={this.first}
                    total={this.state.total}/>
            </div>
        )
    }
}



class Header extends React.Component {
    render() {
        return (
            <header className='top-bar'>
                <Search
                    placeholder="请输入关键字词"
                    onSearch={onSearch}
                    autoFocus />
                <button className='btn'
                    onClick={this.props.back} />
            </header>
        )
    }
}

class Info extends React.Component {
    render() {
        return (
            <div className="info">
                <span>
                    序号<FieldNumberOutlined />
                </span>
                <span>
                    标题<BookOutlined />
                </span>
                <span className='author'>
                    作者<UserOutlined />
                </span>
            </div>
        )
    }
}

class Footer extends React.Component {
    render() {
        return (
            <footer className='footer'>
                <Pagination
                    defaultCurrent={1}
                    total={this.props.total}
                    onChange={this.props.onChange} />
            </footer>
        )
    }
}
